/** @jsxImportSource @emotion/react */
import * as React from "react";
import {管道级别} from "../../../device/edit/压力管道";
import {CCell, Cell, Embed, RCell, Table, TableBody, TableRow, Text, useTheme} from "customize-easy-ui-component";
import {businessCatspMap} from "../../../agreement/AgreementList";
import {ReportFirstPageHeadNrno} from "../rarelyVary";
import {俩列检验设备概况} from "../../park/views";
import {useFolder} from "../../hook/useMainRepUrlOr";
import {RepLink} from "../../common/base";

const render起止输入={
    view:(orc:any)=><>{orc.检验日期1} 至 {orc.检验日期}</>,
    //edit: (inp, setinp)=>{} 编辑器组件的。         【不用】这里录入
};
//标题栏目的显示也要定做的
const render受理文号={
    view:(orc:any)=><Text css={{fontSize:'0.8rem'}}>监督检验受理文号</Text>,
    text: '监督检验受理文号',         //标题的文本
};
const render检起止={
    //【为何】不直接上 node:any {node}, 编辑器公用的标题：InputLine的标题限制成:string不是任意node; 考虑到另外可能更特别的需要注入orc对象才能显示的情形。
    view:(orc:any)=><Text css={{fontSize:'0.8rem'}}>监督检验起止日期</Text>,           //报告的显示回调：
    text: '监督检验起止日期',                    //编辑器公用的标题：
};
export const render施工类别={
    view:(orc:any,rep:any)=>{
        return <>{businessCatspMap.get(rep?.isp?.bsType!)}</>
    },
    //edit: (inp, setinp)=>{} 编辑器组件的。
};
export const config证书概要 = [
    [['工程名称', {n:'工程名称',t:'B',l:[]}], ],
    [['工程地址', {n:'工程地址',t:'B' }] ],
    [['工程总投资', {n:'总投资',u:'万元'} ], ['压力管道级别', {n:'管道级别',t:'l',l:管道级别}] ],
    [['开工日期',{n:'开工时',t:'d'}], ['交工日期',{n:'竣工时',t:'d'}] ],
    [['建设单位','_$使用单位']],
    [['设计单位','设单位'], ['许可证编号','设许号']],
    [['施工单位','施单位'], ['许可证编号','施许号']],
    [['检测机构','测机构'], ['核准证编号','检证号']],
    [[render受理文号, '检受理号' ],   ],
    [[render检起止, {}, render起止输入],  ],
];
//排除掉和 config设备概况 相同的后剩下的：
export const  证书除概况 = [
    [['工程总投资', {n:'总投资',u:'万元'} ],  ],
    [[render受理文号, '检受理号' ],   ],
];

//这个版本：可以把空白区域留给中间的位置区域，而不是把全部内容都集中到纸张的中心位置，尽可能摊开地铺满一张纸区域。上面设备概要区域也允许扩充！
export const CertificatePage = ({orc, rep, children}: { orc: any, rep: any, children?: React.ReactNode }
) => {
    const theme = useTheme();
    const callback = () => {
        return <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
            {ReportFirstPageHeadNrno({theme, rep, mbbm: '（ FJB/DB-1042-0-2020 ）', nMa: true})}
            <div css={{
                "@media print": {
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-around',
                    height: 'calc(100vh - 4rem)',     //剪掉上面头部的高度
                }
            }}>
                <Text variant="h3" css={{textAlign: 'center', lineHeight: '0.8', "@media print": {fontSize: theme.fontSizes[5],},}}>
                    特种设备监督检验证书<br/>
                    <Text css={{"@media print": {
                        display: 'block', marginTop: '0.7rem' },
                    }}>（压力管道安装、改造和重大修理）</Text>
                </Text>
                <div>
                    <div css={{display: 'flex', justifyContent: 'space-between',}}>
                        &nbsp;
                        <Text css={{display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
                        }}>证书编号：{rep.isp?.no}</Text>
                    </div>
                    <Table fixed={ ["15%", "%", "12.5%", "25%"] }
                                   css={{borderCollapse: 'collapse', "@media print": {height: '80vh',}}} tight miniw={800}>
                        <TableBody>
                            <RepLink rep={rep} tag='CertificateSummary'>
                             {俩列检验设备概况({orc, rep, config: config证书概要})}
                            </RepLink>
                            <RepLink rep={rep} tag='Conclusion'>
                                <TableRow>
                                    <CCell colSpan={4}>
                                        <Table fixed={["24%", "39%", "6%", "%"]}
                                               css={{borderCollapse: 'collapse', "@media print": {height: 'fill-available'},}} tight miniw={800}>
                                            <TableBody>
                                                {orc?.检验结论 === '合格' && <TableRow>
                                                        <Cell css={{border: 'none', textIndent: '2rem'}} colSpan={4}>
                                                            <Text>
                                                                按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该压力管道的施工经本
                                                                机构实施监督检验，安全性能符合TSG D7006-2020《压力管道监督检验规则》及GB
                                                                50369-2014《油气长输管道工程施工及验收规范》的要求，特发此证书。
                                                            </Text>
                                                        </Cell>
                                                   </TableRow>
                                                }
                                                <TableRow>
                                                    <Cell css={{border: 'none'}} colSpan={4}>
                                                        <Text css={{fontSize: '1rem'}}>
                                                            附：1.长输管道数据表<br/>
                                                            <Text css={{
                                                                textIndent: '2rem', display: 'block', fontSize: '1rem'
                                                            }}>2.长输管道监督检验报告</Text>
                                                        </Text>
                                                    </Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height: '3rem'}}}>
                                                    <RCell css={{border: 'none'}}>监督检验人员：</RCell>
                                                    <Cell css={{border: 'none'}}>机erter</Cell>
                                                    <RCell css={{border: 'none'}}>日期：</RCell>
                                                    <Cell css={{border: 'none'}}></Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height: '3rem'}}}>
                                                    <RCell css={{border: 'none'}}>审 核：</RCell>
                                                    <Cell css={{border: 'none'}}></Cell>
                                                    <RCell css={{border: 'none'}}>日期：</RCell>
                                                    <Cell css={{border: 'none'}}>2024-04-10</Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height: '3rem'}}}>
                                                    <RCell css={{border: 'none'}}>批 准：</RCell>
                                                    <Cell css={{border: 'none'}}></Cell>
                                                    <RCell css={{border: 'none'}}>日期：</RCell>
                                                    <Cell css={{border: 'none'}}>2024-04-10</Cell>
                                                </TableRow>
                                                <TableRow>
                                                    <RCell css={{border: 'none'}}>监检机构：</RCell>
                                                    <Cell colSpan={2}
                                                          css={{border: 'none'}}>{rep?.isp?.ispu?.name}</Cell>
                                                    <CCell css={{border: 'none'}}>（监督检验机构检验专用章）</CCell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height: 'fill-available'}}}>
                                                    <RCell css={{border: 'none'}}>监督检验机构核准证号：</RCell>
                                                    <Cell colSpan={2}
                                                          css={{border: 'none'}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                                                    <CCell css={{border: 'none'}}>2024-04-10</CCell>
                                                </TableRow>
                                            </TableBody>
                                        </Table>
                                    </CCell>
                                </TableRow>
                            </RepLink>
                        </TableBody>
                    </Table>
                </div>
                <Text css={{fontSize: '0.8rem'}}>注：本证书一式三份，一份监督检验机构存档，两份送交施工单位，其中一份由施工单位随竣工资料交付建设单位。
                </Text>
            </div>
        </div>
    }
    //Hash路由的id对应的DIV 不可以放在Collapse组件底下的。 还未加载组件的无法定位。
    const [renderAll] = useFolder(callback, '检验证书折叠', true);
    return <>
        <div id="Certificate"/>
        {renderAll}
    </>;
};

/*固定页 遇到浮动的排版：如何？ <Table 会自动调整行高，只好拆解上下并排的表格。
  <Table fixed={  ["15%", "%%", "12.5%", "25%"] }  css={ {borderCollapse: 'collapse',} }  tight  miniw={800}>
    <TableBody>
      <TableRow css={{"@media print": {height:'fill-available'} }}>
        <CCell id={'SjcqHCer'} colSpan={4}>
          <Table className='FixedDown' fixed={ ["24%", "39%", "8%", "%"] }
                 css={ {borderCollapse: 'collapse',
                   //TD Cell 限制 maxHeight 是没法起作用的；需要用height；
                   //【全部上级div都会被选中的】"div:has(&)": { height:'fill-available' }  只能增加类标记 id；同时满足 3 个条件的才能算！
                   "div:has(&) #SjcqHCer div": {
                        overflow:'hidden',
                       "@media print": {minHeight:'22rem',}
                   }
                 } }  tight  miniw={800}>
            <TableBody css={ {height:'100%' } } >
            </TableBody>
          </Table>
        </CCell>
      </TableRow>
    </TableBody>
  </Table>
旧版本问题：中间内容区域的部分高度不能自适应，扩充占用空白的区域。
    <TableRow css={{"@media print": {height: 'fill-available'}}}>
        <CCell id={'SjcqHCer'} css={{"@media print": {height: 'fill-available'}}}>
            <Table className='FixedDown' fixed={["24%", "39%", "8%", "%"]}
                   css={{
                       borderCollapse: 'collapse',
                       //TD Cell 限制 maxHeight 是没法起作用的；需要用height；
                       //【全部上级div都会被选中的】"div:has(&)": { height:'fill-available' }  只能增加类标记 id；同时满足 3 个条件的才能算！
                       "div:has(&) #SjcqHCer div": {
                           overflow: 'hidden',
                           "@media print": {minHeight: '22rem',}
                       }
                   }} tight miniw={800}>
                <TableBody css={{height: '100%'}}>
                    <TableRow>
* */
